<script lang="ts" setup>
import { ref, onBeforeMount, onMounted, onUnmounted } from "vue";
import {
    OfficeBuilding,
    Document,
    User,
    Phone,
    Message,
    Location,
    Medal,
    PieChart,
    Connection,
    Service,
    Opportunity,
} from "@element-plus/icons-vue";
import headerIndex from "./components/headerIndex.vue";
import footerIndex from "./components/footerIndex.vue";

// 平台优势数据
const advantageItems = ref([
    {
        title: "全面的招聘资源",
        icon: Document,
        description: "整合上万家企业资源，提供丰富多样的就业机会，覆盖各行各业",
    },
    {
        title: "精准的岗位匹配",
        icon: Connection,
        description: "基于大数据分析和AI算法，为求职者和企业提供智能精准的匹配服务",
    },
    {
        title: "专业的求职指导",
        icon: Service,
        description: "资深职业导师提供一对一辅导，覆盖简历优化、面试技巧等全方位服务",
    },
    {
        title: "高效的招聘流程",
        icon: Opportunity,
        description: "简化招聘流程，提供在线投递、面试安排等功能，提升招聘效率",
    },
]);

// 团队成员数据
const teamMembers = ref([
    {
        name: "张明",
        position: "创始人兼CEO",
        avatar: "https://tse1-mm.cn.bing.net/th/id/OIP-C.x_j4oT7PxgXHjBxp7DRaYwHaHa?w=163&h=180&c=7&r=0&o=5&pid=1.7",
        description: "拥有10年互联网人力资源服务经验，曾任职于知名猎头公司和互联网企业",
    },
    {
        name: "李红",
        position: "首席技术官",
        avatar: "https://tse1-mm.cn.bing.net/th/id/OIP-C.x_j4oT7PxgXHjBxp7DRaYwHaHa?w=163&h=180&c=7&r=0&o=5&pid=1.7",
        description: "前阿里巴巴技术专家，专注于人工智能和大数据分析技术应用",
    },
    {
        name: "王强",
        position: "产品总监",
        avatar: "https://tse1-mm.cn.bing.net/th/id/OIP-C.x_j4oT7PxgXHjBxp7DRaYwHaHa?w=163&h=180&c=7&r=0&o=5&pid=1.7",
        description: "8年产品设计和管理经验，专注于用户体验优化和产品创新",
    },
    {
        name: "赵静",
        position: "运营总监",
        avatar: "https://tse1-mm.cn.bing.net/th/id/OIP-C.x_j4oT7PxgXHjBxp7DRaYwHaHa?w=163&h=180&c=7&r=0&o=5&pid=1.7",
        description: "具有丰富的互联网产品运营和市场推广经验，擅长用户增长策略",
    },
    {
        name: "陈伟",
        position: "人力资源专家",
        avatar: "https://tse1-mm.cn.bing.net/th/id/OIP-C.x_j4oT7PxgXHjBxp7DRaYwHaHa?w=163&h=180&c=7&r=0&o=5&pid=1.7",
        description: "人力资源管理学博士，拥有丰富的招聘和人才发展实践经验",
    },
    {
        name: "刘芳",
        position: "客户服务总监",
        avatar: "https://tse1-mm.cn.bing.net/th/id/OIP-C.x_j4oT7PxgXHjBxp7DRaYwHaHa?w=163&h=180&c=7&r=0&o=5&pid=1.7",
        description: "10年客户服务管理经验，致力于提供高质量的客户体验和服务标准",
    },
]);

// 合作伙伴数据
const partnerCategories = ref([
    {
        category: "科技企业",
        partners: ["华为", "阿里巴巴", "腾讯", "百度", "京东", "小米", "字节跳动", "美团"],
    },
    {
        category: "金融机构",
        partners: ["中国银行", "建设银行", "工商银行", "招商银行", "平安保险", "蚂蚁金服"],
    },
    {
        category: "制造业",
        partners: ["一汽集团", "上汽集团", "格力电器", "海尔集团", "美的集团", "比亚迪"],
    },
    {
        category: "教育机构",
        partners: ["清华大学", "北京大学", "浙江大学", "上海交通大学", "南京大学", "复旦大学"],
    },
]);

// 发展历程数据
const milestones = ref([
    {
        year: "2018年",
        title: "平台创立",
        description: "就业直通车平台正式成立，提供基础的招聘和求职服务",
    },
    {
        year: "2019年",
        title: "服务升级",
        description: "引入职业规划和简历优化等服务，用户数量突破10万",
    },
    {
        year: "2020年",
        title: "技术创新",
        description: "推出AI智能匹配系统，显著提升岗位匹配效率和精准度",
    },
    {
        year: "2021年",
        title: "业务拓展",
        description: "拓展校园招聘业务，与全国50多所高校建立合作关系",
    },
    {
        year: "2022年",
        title: "战略合作",
        description: "与多家行业龙头企业建立战略合作，创建就业生态圈",
    },
    {
        year: "2023年",
        title: "平台升级",
        description: "全面升级平台技术架构和用户体验，服务质量再上新台阶",
    },
]);

// 平台数据统计
const statistics = ref([
    {
        label: "注册用户",
        value: "100万+",
        icon: User,
    },
    {
        label: "合作企业",
        value: "2万+",
        icon: OfficeBuilding,
    },
    {
        label: "岗位发布",
        value: "50万+",
        icon: Document,
    },
    {
        label: "成功就业",
        value: "30万+",
        icon: Medal,
    },
]);

// 表单数据
const form = ref({
    name: "",
    contact: "",
    message: "",
});

onBeforeMount(() => {});
onMounted(() => {});
onUnmounted(() => {});
</script>

<template>
    <div class="scroll_main">
        <div class="about-us-page">
            <headerIndex></headerIndex>

            <el-container>
                <el-main>
                    <!-- 顶部横幅 -->
                    <div class="banner-container">
                        <el-row justify="center" align="middle" class="banner">
                            <el-col :span="24" :md="14" class="banner-text">
                                <h1>关于就业直通车</h1>
                                <p>连接梦想与机会，助力职场成功</p>
                            </el-col>
                        </el-row>
                    </div>

                    <!-- 主要内容 -->
                    <div class="about-content">
                        <!-- 平台简介 -->
                        <el-row :gutter="30" class="intro-section">
                            <el-col :xs="24" :sm="24" :md="12" class="intro-text">
                                <h2 class="section-title">平台简介</h2>
                                <div class="intro-content">
                                    <p>
                                        "就业直通车"平台创立于2018年，是一家专注于提供高质量就业服务的综合性平台。我们致力于连接企业与人才，通过创新技术和专业服务，为求职者和企业提供高效、精准的匹配服务。
                                    </p>
                                    <p>
                                        平台整合了招聘信息发布、简历投递、智能匹配、职业规划、就业培训等多种功能，构建起完整的就业服务生态系统。目前，平台已覆盖全国主要城市，服务用户超过100万，合作企业超过2万家。
                                    </p>
                                    <p>
                                        我们的愿景是成为国内最值得信赖的就业服务平台，通过持续创新和优质服务，为促进就业市场的健康发展贡献力量。
                                    </p>
                                </div>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="12" class="intro-image">
                                <el-image
                                    src="https://tse1-mm.cn.bing.net/th/id/OIP-C.x_j4oT7PxgXHjBxp7DRaYwHaHa?w=163&h=180&c=7&r=0&o=5&pid=1.7"
                                    fit="cover"
                                    class="rounded-image"
                                />
                            </el-col>
                        </el-row>

                        <!-- 平台数据 -->
                        <el-row class="statistics-section">
                            <el-col :span="24">
                                <el-card shadow="hover" class="statistics-card">
                                    <el-row :gutter="20" class="statistics-content">
                                        <el-col
                                            v-for="(stat, index) in statistics"
                                            :key="index"
                                            :xs="12"
                                            :sm="6"
                                            class="stat-item"
                                        >
                                            <div class="stat-icon">
                                                <el-icon :size="40"><component :is="stat.icon" /></el-icon>
                                            </div>
                                            <div class="stat-value">{{ stat.value }}</div>
                                            <div class="stat-label">{{ stat.label }}</div>
                                        </el-col>
                                    </el-row>
                                </el-card>
                            </el-col>
                        </el-row>

                        <!-- 平台优势 -->
                        <div class="advantage-section">
                            <h2 class="section-title text-center">平台优势</h2>
                            <p class="section-subtitle text-center">为什么选择就业直通车</p>

                            <el-row :gutter="30" class="advantage-items">
                                <el-col
                                    v-for="(item, index) in advantageItems"
                                    :key="index"
                                    :xs="24"
                                    :sm="12"
                                    :md="6"
                                    class="advantage-item"
                                >
                                    <el-card shadow="hover" class="advantage-card">
                                        <div class="advantage-icon">
                                            <el-icon :size="40"><component :is="item.icon" /></el-icon>
                                        </div>
                                        <h3>{{ item.title }}</h3>
                                        <p>{{ item.description }}</p>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>

                        <!-- 发展历程 -->
                        <div class="milestone-section">
                            <h2 class="section-title text-center">发展历程</h2>
                            <p class="section-subtitle text-center">我们一路走来的重要时刻</p>

                            <el-timeline class="milestone-timeline">
                                <el-timeline-item
                                    v-for="(milestone, index) in milestones"
                                    :key="index"
                                    :timestamp="milestone.year"
                                    placement="top"
                                    :color="index % 2 === 0 ? '#409EFF' : '#67C23A'"
                                >
                                    <el-card shadow="hover" class="milestone-card">
                                        <h3 class="milestone-title">{{ milestone.title }}</h3>
                                        <p class="milestone-desc">{{ milestone.description }}</p>
                                    </el-card>
                                </el-timeline-item>
                            </el-timeline>
                        </div>

                        <!-- 团队介绍 -->
                        <div class="team-section">
                            <h2 class="section-title text-center">团队介绍</h2>
                            <p class="section-subtitle text-center">专业的团队，优质的服务</p>

                            <el-row :gutter="30" class="team-members">
                                <el-col
                                    v-for="(member, index) in teamMembers"
                                    :key="index"
                                    :xs="24"
                                    :sm="12"
                                    :md="8"
                                    class="team-member"
                                >
                                    <el-card shadow="hover" class="team-card">
                                        <div class="member-avatar">
                                            <el-avatar :size="100" :src="member.avatar" />
                                        </div>
                                        <h3 class="member-name">{{ member.name }}</h3>
                                        <div class="member-position">{{ member.position }}</div>
                                        <p class="member-desc">{{ member.description }}</p>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>

                        <!-- 合作伙伴 -->
                        <div class="partner-section">
                            <h2 class="section-title text-center">合作伙伴</h2>
                            <p class="section-subtitle text-center">携手共创美好未来</p>

                            <el-tabs type="border-card" class="partner-tabs">
                                <el-tab-pane
                                    v-for="(category, index) in partnerCategories"
                                    :key="index"
                                    :label="category.category"
                                >
                                    <div class="partner-list">
                                        <el-tag
                                            v-for="(partner, pIndex) in category.partners"
                                            :key="pIndex"
                                            size="large"
                                            class="partner-tag"
                                            effect="plain"
                                        >
                                            {{ partner }}
                                        </el-tag>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </div>

                        <!-- 联系我们 -->
                        <div class="contact-section">
                            <h2 class="section-title text-center">联系我们</h2>
                            <p class="section-subtitle text-center">随时为您提供帮助</p>

                            <el-row :gutter="30" class="contact-content">
                                <el-col :xs="24" :sm="24" :md="12" class="contact-info">
                                    <el-card shadow="hover" class="contact-card">
                                        <template #header>
                                            <div class="card-header">
                                                <h3>联系方式</h3>
                                            </div>
                                        </template>
                                        <ul class="contact-list">
                                            <li>
                                                <el-icon><Phone /></el-icon>
                                                <span>客服电话：400-123-4567</span>
                                            </li>
                                            <li>
                                                <el-icon><Message /></el-icon>
                                                <span>电子邮箱：contact@jyztc.com</span>
                                            </li>
                                            <li>
                                                <el-icon><Location /></el-icon>
                                                <span>公司地址：北京市海淀区中关村大街1号</span>
                                            </li>
                                        </ul>
                                        <div class="business-hours">
                                            <h4>工作时间</h4>
                                            <p>周一至周五：9:00 - 18:00</p>
                                            <p>周六、周日：10:00 - 16:00 (仅线上客服)</p>
                                        </div>
                                    </el-card>
                                </el-col>
                                <el-col :xs="24" :sm="24" :md="12" class="contact-form">
                                    <el-card shadow="hover" class="form-card">
                                        <template #header>
                                            <div class="card-header">
                                                <h3>留言咨询</h3>
                                            </div>
                                        </template>
                                        <el-form :model="form" label-position="top">
                                            <el-form-item label="姓名">
                                                <el-input v-model="form.name" placeholder="请输入您的姓名" />
                                            </el-form-item>
                                            <el-form-item label="联系方式">
                                                <el-input v-model="form.contact" placeholder="请输入电话或邮箱" />
                                            </el-form-item>
                                            <el-form-item label="咨询内容">
                                                <el-input
                                                    v-model="form.message"
                                                    type="textarea"
                                                    :rows="4"
                                                    placeholder="请输入您的咨询内容"
                                                />
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button type="primary" style="width: 100%">提交</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-main>
            </el-container>

            <footerIndex></footerIndex>
        </div>
        <el-backtop :bottom="80" target=".scroll_main" />
    </div>
</template>

<style scoped>
.about-us-page {
    min-height: 100vh;
    background-color: #f6f7f9;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 100%;
}

.el-main {
    padding: 0;
    flex: 1;
    overflow-x: hidden;
}

/* 顶部横幅 */
.banner-container {
    background: linear-gradient(135deg, #42b983, #35495e);
    color: white;
    padding: 80px 20px;
    text-align: center;
    margin-bottom: 40px;
    width: 100%;
}

.banner h1 {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 20px;
}

.banner p {
    font-size: 20px;
    margin-bottom: 0;
    opacity: 0.9;
}

/* 主内容 */
.about-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 50px;
}

/* 标题样式 */
.section-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #303133;
    position: relative;
}

.section-subtitle {
    font-size: 16px;
    color: #606266;
    margin-bottom: 30px;
}

.text-center {
    text-align: center;
}

/* 平台简介 */
.intro-section {
    margin-bottom: 60px;
}

.intro-content p {
    margin-bottom: 15px;
    line-height: 1.8;
    color: #606266;
}

.intro-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rounded-image {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 数据统计 */
.statistics-section {
    margin-bottom: 60px;
}

.statistics-card {
    border-radius: 10px;
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
}

.statistics-content {
    padding: 20px 0;
}

.stat-item {
    text-align: center;
    padding: 20px 0;
}

.stat-icon {
    color: #409eff;
    margin-bottom: 10px;
}

.stat-value {
    font-size: 28px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 16px;
    color: #606266;
}

/* 平台优势 */
.advantage-section {
    margin-bottom: 60px;
}

.advantage-items {
    margin-top: 30px;
}

.advantage-item {
    margin-bottom: 20px;
}

.advantage-card {
    height: 100%;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease;
}

.advantage-card:hover {
    transform: translateY(-5px);
}

.advantage-icon {
    color: #409eff;
    margin: 20px 0;
}

.advantage-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.advantage-card p {
    color: #606266;
    line-height: 1.6;
}

/* 发展历程 */
.milestone-section {
    margin-bottom: 60px;
}

.milestone-timeline {
    margin-top: 30px;
    padding: 20px;
}

.milestone-card {
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.milestone-card:hover {
    transform: translateY(-3px);
}

.milestone-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.milestone-desc {
    color: #606266;
    margin: 0;
}

/* 团队介绍 */
.team-section {
    margin-bottom: 60px;
}

.team-members {
    margin-top: 30px;
}

.team-member {
    margin-bottom: 20px;
}

.team-card {
    height: 100%;
    border-radius: 10px;
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease;
}

.team-card:hover {
    transform: translateY(-5px);
}

.member-avatar {
    margin-bottom: 15px;
}

.member-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 5px;
}

.member-position {
    color: #409eff;
    font-weight: 500;
    margin-bottom: 10px;
}

.member-desc {
    color: #606266;
    line-height: 1.6;
}

/* 合作伙伴 */
.partner-section {
    margin-bottom: 60px;
}

.partner-tabs {
    margin-top: 30px;
}

.partner-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
    max-width: 100%;
}

.partner-tag {
    padding: 10px 20px;
    font-size: 16px;
    margin-bottom: 10px;
    max-width: 100%;
}

/* 确保所有卡片不会导致溢出 */
.el-card {
    max-width: 100%;
    box-sizing: border-box;
}

/* 联系我们 */
.contact-section {
    margin-bottom: 40px;
}

.contact-content {
    margin-top: 30px;
}

.contact-info,
.contact-form {
    margin-bottom: 20px;
}

.contact-card,
.form-card {
    height: 100%;
    border-radius: 10px;
}

.card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.contact-list li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #606266;
}

.contact-list li .el-icon {
    color: #409eff;
    margin-right: 10px;
    font-size: 18px;
}

.business-hours {
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.business-hours h4 {
    font-size: 16px;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.business-hours p {
    color: #606266;
    margin: 5px 0;
}

/* 表单样式 */
:deep(.el-form-item__label) {
    font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .banner h1 {
        font-size: 30px;
    }

    .banner p {
        font-size: 18px;
    }

    .about-content {
        padding: 0 15px 30px;
    }

    .section-title {
        font-size: 24px;
    }

    .stat-value {
        font-size: 24px;
    }

    .milestone-timeline {
        padding: 10px;
    }
}
</style>
